<template>
  <demoBlock title="动画" padding>
    <vcu-cell is-link title="Fade" @click="animate('vcu-fade')" />
    <vcu-cell is-link title="Slide Up" @click="animate('vcu-slide-up')" />
    <vcu-cell is-link title="Slide Down" @click="animate('vcu-slide-down')" />
    <vcu-cell is-link title="Slide Left" @click="animate('vcu-slide-left')" />
    <vcu-cell is-link title="Slide Right" @click="animate('vcu-slide-right')" />

    <transition :name="transitionName">
      <div v-show="show" class="demo-animate-block">{{ transitionName }}</div>
    </transition>
  </demoBlock>
</template>

<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
  setup() {
    const show = ref(false);
    const transitionName = ref("");

    const animate = (newName) => {
      show.value = true;
      transitionName.value = newName;

      setTimeout(() => {
        show.value = false;
      }, 500);
    };

    return { show, animate, transitionName };
  },
});
</script>


<style lang="less" scoped>
.demo-animate-block {
  position: fixed;
  top: 50%;
  left: 50%;
  text-align: center;
  padding: 15px 25px;
  color: #fff;
  line-height: 50px;
  margin: -50px 0 0 -60px;
  background-color: green;
  border-radius: 8px;
}
</style>